<template>
    <div class="wrapper">
        <scroller class="container" :style="scrollerStyle" :has-bottom-border="false">
            <wxc-cell :title="data.name" :cell-style="nameCellStyle">
                <image class="nameImage" slot="label" src="bmlocal://assets/mineAvatar.png"></image>
            </wxc-cell>

            <wxc-cell title="工号" :cell-style="cellStyle">
                <image class="image" slot="label" src="bmlocal://assets/liftId.png"></image>
                <text :style="valueStyle">{{data.number}}</text>
            </wxc-cell>

            <wxc-cell title="手机号" :cell-style="cellStyle">
                <image class="image" slot="label" src="bmlocal://assets/minePhone.png"></image>
                <text :style="valueStyle">{{data.phone}}</text>
            </wxc-cell>

            <wxc-cell title="我的组" :cell-style="cellStyle">
                <image class="image" slot="label" src="bmlocal://assets/mineTeam.png"></image>
                <text :style="valueStyle">{{data.teamName}}</text>
            </wxc-cell>

            <wxc-cell title="组长" :cell-style="teamCell" :has-bottom-border="false">
                <image class="image" slot="label" src="bmlocal://assets/mineLeader.png"></image>
                <text :style="valueStyle">{{data.teamLeader}}</text>
            </wxc-cell>

            <wxc-cell title="证书" :cell-style="certificateCell" :has-bottom-border="false">
                <image class="image" slot="label" src="bmlocal://assets/mineCertificate.png"></image>
                <image class="cardImg" slot="value" :src="data.t1CardFile"  style="margin-right:20px" @click="previewPhoto(0)"></image>
                <image class="cardImg" slot="value" :src="data.t2CardFile"  @click="previewPhoto(1)"></image>
            </wxc-cell>

            <wxc-cell title="清理缓存" :cell-style="teamCell" :has-bottom-border="false" @wxcCellClicked="clearCache()">
                <text :style="valueStyle">{{cache}}</text>
            </wxc-cell>

            <div class="div-button">
                <wxc-button text="退出登录"
                    size="full"
                    type="red"
                    textStyle="{color:'#ffffff'}"
                    @wxcButtonClicked="logout()"></wxc-button>
            </div>
        </scroller>
    </div>

</template>
<script>
    import { Utils,WxcCell,WxcButton} from 'weex-ui';
    var cacheModule = weex.requireModule('CacheModule')
    export default {
        components:{
            Utils,
            WxcCell,
            WxcButton,
        },
        data () {
            return{
                token:'',
                isAndroid:false,
                valueStyle:{
                    color:'#999999',
                },
                nameCellStyle:{
                    height:'200px',
                    marginBottom:'30px',
                },
                cellStyle:{
                    height:'90px'
                },
                teamCell:{
                    height:'90px',
                    marginBottom:'30px',
                },
                certificateCell:{
                    height:'150px',
                    marginBottom:'30px',
                },
                imageList:[],
                cache:'',
                data:{},
                
            }
        },
        methods: {
            getPersonDetails(){
                this.$fetch({
                    header:{
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'Authorization': `Bearer `+ this.token
                    },
                    method: 'POST',    
                    name: 'personDetails',
                }).then(res => {
                    if(res.success){
                        this.data = res.data
                        this.imageList.push(this.data.t1CardFile)
                        this.imageList.push(this.data.t2CardFile)
                    }else{
                        this.$notice.toast({
                            message: res.data
                        })
                    }
                }, error => {
                    this.$notice.toast({
                        message: '网络错误'
                    })
                })
            },
            clearCache(){
                cacheModule.clearCaches(resData => {
                    console.log(resData);
                    if (resData){
                        this.cache = '0m'
                        this.$notice.toast({
                            message: '已清理'
                        })
                    } else {
                        this.$notice.toast({
                            message: '清理失败'
                        })
                    }
                });
            },
            logout(){
                var _this = this
                this.$notice.confirm({
                    title: '提示',
                    message: '退出登录将清空所有本地缓存记录，是否确认退出',
                    okTitle: '确认',
                    cancelTitle: '取消',
                    okCallback() {
                        _this.$storage.removeAll().then(resData => {
                        })
                        _this.$router.setHomePage('/pages/login.js')
                    },
                    cancelCallback() {
                        // 点击取消按钮的回调
                    }

                })
                
            },
            previewPhoto(index){
                this.$image.preview({
                        index: index,                     // 所点击图片下标
                        images: this.imageList,        // 图片的网络地址
                })
            },
        },
        created(){
            this.$notice.loading.show()
            this.isAndroid = Utils.env.isAndroid()
            const tabPageHeight = Utils.env.getPageHeight()
            this.containerHeight = tabPageHeight
            this.scrollerStyle ={ height: this.containerHeight + 'px' }
            
            //获取token
            this.token = this.$storage.getSync('token')
            if(!this.token){
                this.$router.setHomePage('/pages/login.js')
            }

            this.getPersonDetails()
            let _this = this
            cacheModule.getCachesSize(function(resData){
                _this.cache = resData
            })
            this.$notice.loading.hide()
        }
    }
</script>

<style scoped>
    .container {
        flex: 1;
        width: 750px;
        background-color: #f2f3f4;
    }
    .nameImage{
        width: 120px;
        height: 120px;
        margin-right: 20px;
    }
    .cardImg{
        width: 130px;
        height: 130px;
    }
    .image {
        width: 50px;
        height: 50px;
        margin-right: 20px;
    }
    .div-button{
        flex-direction: row;
        justify-content: space-around;
        margin-bottom: 20px;
    }   
</style>